<script setup lang='ts'>
import {footerProps, footerEmits} from './dFooter'
import dIcon from '@/components/dIcon.vue'
defineProps(footerProps)

const emits = defineEmits(footerEmits)
//页面SIZE改变
const onSizeChange = () => {
  emits('sizeChange')
}

//页数改变
const onCurrentChange = () => {
  emits('currentChange')
}

//操作
const onOperation = (code:string) => {
  emits('operation', code)
}
</script>

<template>
  <div class="d-footer__wapper d-common-flex-row d-comon-flex-justend">
    <div class="d-common-flex-row d-common-flex-waper d-common-flex-full d-footer-button__wapper">
      <slot name="operbutton-prepend" />
      <template v-for="operbutton in footerButtons" :key="operbutton.code">
        <el-button
          v-if="operbutton.type==='noraml'||operbutton.type==='icon'"
          v-blur
          :loading="showLoading"
          :disabled="operbutton.disabled"
          :type="operbutton.elType?operbutton.elType:'primary'"
          :plain="operbutton.plain"
          :style="operbutton.style"
          :class="operbutton.class"
          @click="onOperation(operbutton.code)"
        >
          <d-icon v-if="operbutton.iconConfig" class="el-icon el-icon--left" :icon-config="operbutton.iconConfig" />
          {{ operbutton.type==='icon'?'':operbutton.label }}
        </el-button>
        <el-button
          v-else-if="operbutton.type==='link'"
          v-blur
          type="primary"
          link
          :disabled="operbutton.disabled"
          :style="operbutton.style"
          :class="operbutton.class"
          @click="onOperation(operbutton.code)"
        >
          {{ operbutton.label }}
        </el-button>
      </template>
      <slot name="operbutton-append" />
    </div>
    <el-pagination
      v-if="pageConfig"
      v-model:currentPage="pageConfig.currentPage"
      v-model:page-size="pageConfig.pageSize"
      :pager-count="5"
      :background="false"
      :disabled="showLoading"
      :layout="pageConfig.layout"
      :total="pageConfig.total"
      @size-change="onSizeChange"
      @current-change="onCurrentChange"
    />
  </div>
</template>

<style scoped>
.d-footer__wapper{
  --d-footer-padding:var(--d-line-height-level-3);
  --d-footer-border-color:var(--d-color-grey);
  --d-footer-lineheight:var(--d-line-height-level-3);
  /* padding-left: var(--d-footer-padding); */
  /* padding-right: var(--d-footer-padding); */
  align-items: center;
  padding-top: 8px;
  /* border-bottom: 1px solid var(--d-footer-border-color); */
  /* background-color: var(--d-footer-background-color); */
  min-height: var(--d-footer-lineheight);
}
.d-footer-button__wapper{
  column-gap: var(--d-margin-level-1);
  row-gap: var(--d-margin-level-1);
}
</style>